<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{ztreeBase::ztree})"></head>
<body>
	<div class="x-body layui-anim layui-anim-up">
		<table class="layui-table">
			<colgroup>
				<col width="80">
				<col width="300">
			</colgroup>
			<tr>
				<td>用户名</td>
				<td>
					<input type="hidden" id="userId" name="userId" th:value="${user.id}">
					<span th:text="${user.name}"></span>
				</td>
			</tr>
			<tr>
				<td>角色</td>
				<td>
					<div style="height: 350px; overflow: auto;">
						<ul id="tree" class="ztree"></ul>
					</div>
				</td>
			</tr>
		</table>
		<div class="layui-form-item">
			<a href="javascript:;" id="save" class="layui-btn">保存</a>
			<a href="javascript:;" id="close" class="layui-btn">关闭</a>
		</div>
	</div>
</body>
<script type="text/javascript" th:inline="javascript">
	var zTreeObj;
	//zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）$("input[name='status'][value=" + treeNode.status + "]").attr("checked",true);
	var zNodes = [[${zNodes}]];
	//zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	var setting = {
		view : {
			selectedMulti : false
		},
		data : {
			key : {
				name : 'nameZh'
			}
		},
		check : {
			enable : true,
			chkStyle : 'radio',
			radioType: "all"
		}
	};
	//一般直接写在一个js文件中
	layui.use([ "layer", "form" ], function() {
		var layer = layui.layer, form = layui.form;
		//初始化菜单树
		zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
		
		$('#close').on('click', function() {
			admin_close_iframe_window();
		});
		$('#save').on('click', function() {
			var userId = $('#userId').val();
			var roleId;
			var nodes = zTreeObj.getCheckedNodes(true);
			if(nodes.length == 0){
				layer.msg('请选择角色', {
					icon : 5
				});
				return;
			}else{
				roleId = nodes[0].id;
			}
			$.ajax({
				//几个参数需要注意一下
				type : 'post',//方法类型
				dataType : 'json',//预期服务器返回的数据类型
				url : ctxPath + '/system/role/assign',//url
				data : {userId : userId, roleId : roleId},
				traditional : true,
				success : function(result) {
					if (result.code == 0) {
						admin_close_success_msg('保存成功');
						return;
					} else {
						layer.msg('保存失败。错误信息：' + result.msg, {
							icon : 2
						});
						return;
					}
				},
				error : function() {
					layer.msg('保存失败', {
						icon : 2
					});
				}
			});
		});
		
	});
</script>
</html>